<template>
  <view class="order_page">
    <view class="order_type">
      <view
        class="type_item"
        :class="orderType === 0 ? 'current' : ''"
        @click.stop="changeType(0)"
      >
        <image
          class="item_image"
          v-if="orderType === 0"
          :src="oss2('funCard/order_choose.png')"
        />
        <image
          class="item_image"
          v-else
          :src="oss2('funCard/order_wait.png')"
        />
        <text class="item_text">我赠送的</text>
      </view>
      <view
        class="type_item"
        :class="orderType === 1 ? 'current' : ''"
        @click.stop="changeType(1)"
      >
        <image
          class="item_image"
          v-if="orderType === 1"
          :src="oss2('funCard/order_choose.png')"
        />
        <image
          class="item_image"
          v-else
          :src="oss2('funCard/order_wait.png')"
        />
        <text class="item_text">我收到的</text>
      </view>
    </view>

    <view class="order_status" v-if="orderType === 0">
      <view
        class="status_item"
        @click.stop="changeStatus(1)"
        :class="listStatus === 1 ? 'current_status' : ''"
      >
        全部
        <view class="status_line" v-if="listStatus === 1"></view>
      </view>
      <view
        class="status_item"
        @click.stop="changeStatus(0)"
        :class="listStatus === 0 ? 'current_status' : ''"
        >待支付
        <view class="status_line" v-if="listStatus === 0"></view>
      </view>
      <view
        class="status_item"
        @click.stop="changeStatus(7)"
        :class="listStatus === 7 ? 'current_status' : ''"
        >未赠送
        <view class="status_line" v-if="listStatus === 7"></view>
      </view>
      <view
        class="status_item"
        @click.stop="changeStatus(-1)"
        :class="listStatus === -1 ? 'current_status' : ''"
        >已赠送
        <view class="status_line" v-if="listStatus === -1"></view>
      </view>
    </view>

    <order-empty v-if="!listData.total" />
    <view v-else>
      <view class="order_list left_animotion" v-if="orderType === 0">
        <view v-for="item in listData.list" :key="item.id">
          <view class="order_item">
            <view
              class="status"
              :style="{
                backgroundImage: `url(${oss2('funCard/order_send_back.png')})`,
              }"
            >
              {{ orderStatus[item.orderStatus] }}
            </view>

            <view class="title">
              <image
                class="title_icon"
                :src="oss2('funCard/order_icon.png')"
              />玩心FUN享卡
            </view>
            <view class="detail" @click.stop="showDetail(item)">
              <image class="detail_card" :src="item.giftCardFront" />
              <view class="text">{{ item.giftCardWord }}</view>

              <view
                class="time_content"
                v-if="
                  (item.orderStatus === 0 ||
                    item.orderStatus === 6 ||
                    item.orderStatus === 7) &&
                  Object.keys(item.showTime).length !== 0
                "
              >
                <view class="time_text">{{
                  item.payTime ? "赠送剩余时间" : "支付剩余时间"
                }}</view>
                <view class="time_time">
                  <view
                    class="time_view"
                    v-if="item.showTime.hour && item.showTime.hour !== 0"
                  >
                    {{ item.showTime.hour }}
                    <label class="time_label">时</label>
                  </view>
                  {{ item.showTime.second }}
                  <label class="time_label">分</label>
                </view>
              </view>
            </view>

            <view class="btn">
              <view
                class="pay"
                v-if="
                  (item.orderStatus === 0 || item.orderStatus === 6) &&
                  Object.keys(item.showTime).length !== 0
                "
                @click.stop="toPurchase(item)"
                >立即付款
              </view>
              <view
                class="cancel"
                v-if="item.orderStatus === 0 || item.orderStatus === 6"
                @click.stop="toCancel(item)"
                >取消订单
              </view>
              <view
                class="cancel"
                v-if="item.orderStatus === 4"
                @click.stop="toDelete(item)"
                >删除订单
              </view>
              <view
                class="service"
                v-if="item.orderStatus === 7"
                @click.stop="toRefund(item)"
                >申请退款
              </view>
              <button
                open-type="share"
                :data-id="item.id"
                class="rule_kefu"
                v-if="item.orderStatus === 7"
                @click="toShare"
              >
                <view class="pay">立即分享</view>
              </button>
              <button
                class="rule_kefu"
                @click="toKefu"
                open-type="contact"
                v-if="item.orderStatus === 1 || item.orderStatus === 2"
              >
                <view class="service">发起售后</view>
              </button>
            </view>
          </view>
        </view>
      </view>

      <view class="order_list_receive left_animotion" v-if="orderType === 1">
        <view v-for="item in listData.list" :key="item.id">
          <view class="receive_order_item">
            <view
              class="title_back"
              :style="{
                backgroundImage: `url(${oss2('funCard/order_back.png')})`,
              }"
              @click.stop="showReceiveDetail(item)"
            >
              <view class="title_text">
                <label class="title_label">送你一份</label>
                <label class="title_label">奥利奥玩心小礼物</label>
              </view>
              <image class="order_card" :src="item.giftCardFront"></image>
              <view
                class="title_status"
                :style="{
                  backgroundImage: `url(${oss2(
                    'funCard/order_receive_back.png'
                  )})`,
                }"
              >
                {{ orderStatus[item.orderStatus] }}
              </view>
            </view>
            <view class="order_info">
              <image
                class="info_iamge"
                :src="item.memberAvatar || oss2('personal/moren_avatar.png')"
              />
              <view class="info_wish">
                <label class="info_label">{{ item.memberName }}</label>
                <label class="wish">{{ item.giftCardWord }}</label>
              </view>
              <view class="btn">
                <view
                  class="pay"
                  v-if="item.orderStatus === 2"
                  @click.stop="toReceive(item)"
                  >确认收货
                </view>
                <button class="rule_kefu" open-type="contact">
                  <view class="service">问题咨询</view>
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom_btn">
      <view @click="toText('常见问题')" class="btn_view">
        <image
          class="btn_image"
          :src="oss2('funCard/order_question.png')"
        />常见问题
      </view>
      <button class="rule_kefu" open-type="contact" @click.stop="onlineKf">
        <view class="btn_view">
          <image
            class="btn_image"
            :src="oss2('funCard/order_service.png')"
          />在线客服
        </view>
      </button>
    </view>

    <!-- 常见问题 -->
    <TextPopup
      v-if="showTextDialog"
      :keyName="textKey"
      @close="showTextDialog = false"
    >
    </TextPopup>
  </view>
</template>
  
  <script setup>
import OrderEmpty from "@/components/empty-order";
import TextPopup from "@/components/text-popup.vue";

import {
  onLoad,
  onShow,
  onUnload,
  onHide,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { ref, defineProps, watch } from "vue";
import { oss2, debounce, message } from "@/utils/utils";

import { wxOrderPurchase } from "@/services/mall";
import {
  GetOrderList,
  Refund,
  Cancel,
  Delete,
  Subscribe,
} from "@/services/giftcard.js";

const props = defineProps({
  currentType: {
    type: Number,
    default: 0,
  },
});

let enterTime = "";
let outTime = "";
let stayTime = "";
let emdlzMap = {
  1: "fc_all_orders",
  0: "fc_unpaid_orders",
  7: "fc_no_gift",
  1: "fc_presented",
};
const orderStatus = {
  0: "待付款",
  1: "待发货",
  2: "已发货",
  3: "已完成",
  4: "已关闭",
  5: "无效订单",
  6: "待付款", // 付款中
  7: "待赠送", // 待填写地址
};

const orderType = ref(0); // 0->我购买的；1->我收到的
const listStatus = ref(1); // 1->全部；0->待支付；7->未赠送；-1->已赠送
const listData = ref({
  total: 0,
  list: [],
});

const showTextDialog = ref(false);
const textKey = ref("");

onLoad((option) => {
  if (option.orderType) {
    changeType(parseInt(option.orderType));
  } else {
    getOrderList();
  }
});
onShow(() => {
  // 用户进入时间
  enterTime = new Date();
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "view",
    "fc_orders_page",
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "view",
    "fc_orders_page",
    stayTime
  );
});

const getOrderList = async () => {
  uni.showLoading({
    title: "正在加载",
  });
  let form = {};
  if (listStatus.value === 1) {
    form.received = orderType.value;
  } else {
    form.received = orderType.value;
    form.status = listStatus.value;
  }
  let { data } = await GetOrderList(form);
  const nowTime = new Date().getTime();
  data.list.forEach((item) => {
    const deadline = new Date(item.createTime).getTime() + 60 * 60 * 1000 * 2;
    if (item.payTime) {
      const shareline = new Date(item.payTime).getTime() + 60 * 60 * 1000 * 24;
      if (nowTime < shareline) {
        item.showTime = dateTimeStr(shareline - nowTime);
      } else {
        item.showTime = {};
      }
    } else {
      if (nowTime < deadline) {
        item.showTime = dateTimeStr(deadline - nowTime);
      } else {
        item.showTime = {};
      }
    }
  });

  listData.value = data;
  console.log("orderlist", listData.value);
  uni.hideLoading();
};
watch(
  () => props.currentType,
  () => {
    console.log("监听porps", props.currentType);
    if (props.currentType === 1) {
      getOrderList();
    }
  },
  {
    immediate: true, // 这个属性是重点啦
  }
);
const changeType = (type) => {
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "click",
    type === 0 ? "fc_present_gift" : "fc_receive_gift",
    ""
  );
  orderType.value = type;
  if (type === 1) {
    listStatus.value = 1;
  }
  getOrderList();
};
const changeStatus = (status) => {
  if (listStatus.value === status) return;
  getApp().emdlz("track", "event", "fc_my_orders", "view", emdlzMap[status]);
  listStatus.value = status;
  getOrderList();
};
const dateTimeStr = (val) => {
  var hour_ms = 60 * 60 * 1000; //一小时等于的毫秒数
  var min_ms = 60 * 1000; // 一分钟等于的毫秒数
  // var ss_ms = 1000; //一秒等于的毫秒数
  var h_ms = parseInt(val / hour_ms); //获取小时部分
  var m_ms = parseInt((val % hour_ms) / min_ms); //获取分钟部分
  // var s_ms = parseInt((val % min_ms) / ss_ms); //获取秒数
  return { hour: h_ms, second: m_ms };
};

onShareAppMessage((e) => {
  let title = "快来定制你的奥利奥玩心FUN享卡！";
  let pageUrl = "/funCard/index";
  let imageUrl = oss2("funCard/card_wx.png");
  if (e.target) {
    const id = e.target.dataset.id;
    title = "送你一份奥利奥玩心小礼物，快来领取！";
    pageUrl = "/funCard/share?orderId=" + id;
    imageUrl = oss2("funCard/gift_wx.png");
  }

  const shareObj = {
    title: title, // 默认是小程序的名称(可以写slogan等)
    path: pageUrl, // 默认是当前页面，必须是以‘/’开头的完整路径
    imageUrl: imageUrl, //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: (res) => {
      if (res.errMsg == "shareAppMessage:ok") {
      }
    },
    fail: (err) => {
      console.log("转发失败之后的回调", err);
      if (res.errMsg == "shareAppMessage:fail cancel") {
        console.log("用户取消转发");
      } else if (res.errMsg == "shareAppMessage:fail") {
        console.log("转发失败，其中detail message 为详细失败信息");
      }
    },
    complete: () => {
      console.log("转发结束之后的回调（转发成不成功都会执行）");
    },
  };
  console.log(shareObj);
  return shareObj;
});

const toText = (key) => {
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "click",
    "fc_common_questions",
    ""
  );

  textKey.value = key;
  showTextDialog.value = true;
};
const onlineKf = () => {
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "click",
    "fc_online_service",
    ""
  );
};

const showDetail = (item) => {
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "click",
    "fc_order_" + item.id,
    ""
  );
  uni.navigateTo({
    url: "/funCard/orderDetail?orderId=" + item.id,
  });
};
const showReceiveDetail = (item) => {
  uni.navigateTo({
    url: "/funCard/orderDetail?type=receive&orderId=" + item.id,
  });
};

const toPurchase = debounce(
  async (item) => {
    getApp().emdlz(
      "track",
      "event",
      "fc_my_orders",
      "click",
      "fc_pay_now_1",
      ""
    );

    const res = await wxOrderPurchase({
      id: item.id,
      appId: process.env.WXAPPID,
    });
    console.log("------------------支付", res.data);
    if (res?.code === 200) {
      uni.requestPayment({
        provider: "wxpay", //支付类型-固定值
        timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
        nonceStr: res.data.nonceStr, // 随机字符串
        package: res.data.package, // 固定值
        signType: res.data.signType, //固定值
        paySign: res.data.paySign, //签名
        success: async function (res) {
          console.log("success:" + JSON.stringify(res));
          getApp()
            .sr()
            .track("custom_order", {
              order: {
                order_id: item.id,
                order_time: Date.now(),
                order_status: "payed",
              },
              sub_orders: [
                {
                  sub_order_id: item.id,
                  order_amt: item.finalAmount,
                  pay_amt: item.finalAmount,
                },
              ],
              // more...
            });

          message("支付成功", 1000);
          // 订阅
          uni.requestSubscribeMessage({
            tmplIds: [
              process.env.FUNCARDDELIVERYNOTICE,
              process.env.FUNCARDSIGNNOTICE,
              process.env.FUNCARDREFUNDSUCCESSNOTICE,
            ],
            success: async (res2) => {
              await Subscribe({
                appId: process.env.WXAPPID,
                orderId: orderId.value,
                scene: [
                  "GIFTCARD_STATE_CHANGE",
                  "ORDER_DELIVERY",
                  "REFUND_SUCCEED",
                ],
              });
            },
            fail: function (err) {
              console.log(err);
            },
          });

          uni.redirectTo({
            url: "/funCard/share?orderId=" + item.id + "&type=send",
          });
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
          getApp()
            .sr()
            .track("custom_order", {
              order: {
                order_id: item.id,
                order_time: Date.now(),
                order_status: "cancel_pay",
              },
              sub_orders: [
                {
                  sub_order_id: item.id,
                  order_amt: item.finalAmount,
                  pay_amt: item.finalAmount,
                },
              ],
              // more...
            });

          uni.showModal({
            title: "确定取消支付吗？",
            content: "120分钟内未付款，订单将自动关闭，请尽快付款哦！",
            cancelText: "稍后付款",
            confirmText: "继续付款",
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
                toPurchase(item);
              } else if (res.cancel) {
                console.log("用户点击取消");
                message("取消支付");
              }
            },
          });
        },
      });
    } else {
      message(res.message);
    }
  },
  500,
  false
);
const toDelete = debounce(
  (item) => {
    getApp().emdlz(
      "track",
      "event",
      "fc_my_orders",
      "click",
      "fc_delete_order_1",
      ""
    );
    uni.showModal({
      content: "确定是否删除此订单？",
      success: async function (res) {
        if (res.confirm) {
          const res = await Delete(item.id);
          if (res?.code === 200) {
            await message("删除成功", 2000);
            getOrderList();
          }
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  },
  500,
  false
);
const toCancel = debounce(
  async (item) => {
    getApp().emdlz(
      "track",
      "event",
      "fc_my_orders",
      "click",
      "fc_cancel_order_1",
      ""
    );
    const res = await Cancel({ id: item.id });
    if (res?.code === 200) {
      getApp()
        .sr()
        .track("custom_order", {
          order: {
            order_id: item.id,
            order_time: Date.now(),
            order_status: "cancel_give_order",
          },
          sub_orders: [
            {
              sub_order_id: item.id,
              order_amt: item.totalAmount,
              pay_amt: item.finalAmount,
            },
          ],
        });
      await message("取消成功", 2000);
      getOrderList();
    } else {
      message(res.message);
    }
  },
  500,
  false
);
const toRefund = async (item) => {
  // 订阅
  uni.requestSubscribeMessage({
    tmplIds: [process.env.FUNCARDREFUNDSUCCESSNOTICE],
    success: async (res2) => {
      await Subscribe({
        appId: process.env.WXAPPID,
        orderId: item.id,
        scene: ["REFUND_ACCEPT"],
      });
    },
    fail: function (err) {
      console.log(err);
    },
  });

  const res = await Refund({
    orderId: item.id,
    refundReason: "",
    orderItemIds: [],
    refundScope: 0,
    description: "",
  });
  if (res?.code === 200) {
    message("退款成功");
    getOrderList();
  } else {
    message(res.message);
  }
  getApp().emdlz("track", "event", "fc_my_orders", "click", "fc_refunds_1", "");
};
const toReceive = debounce(
  async (item) => {
    const res = await Reveive({ id: item.id });
    if (res?.code === 200) {
      await message("确认收货", 2000);
      getOrderList();
    } else {
      message(res.message);
    }
  },
  500,
  false
);

const toShare = () => {
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "click",
    "fc_share_order_1",
    ""
  );
};
const toKefu = () => {
  getApp().emdlz(
    "track",
    "event",
    "fc_my_orders",
    "click",
    "fc_after_sales_1",
    ""
  );
};
</script>
  
  <style lang="less" scoped>
@import "@/static/css/theme.less";
@keyframes BottomShow {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.left_animotion {
  animation: BottomShow 0.5s;
  -moz-animation: BottomShow 0.5s; /* Firefox */
  -webkit-animation: BottomShow 0.5s; /* Safari 和 Chrome */
  -o-animation: BottomShow 0.5s; /* Opera */
}
.order_page {
  width: 375px;
  min-height: 667px;
  height: 100vh;
  background-color: #f0f1f3;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 65px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .order_type {
    display: flex;
    justify-content: space-around;
    width: 375px;
    height: 59px;
    box-sizing: border-box;
    padding: 0 24px;
    .type_item {
      display: flex;
      align-items: center;
      width: 144px;
      background: #ffffff;
      box-sizing: border-box;
      border-radius: 4px;
      .item_image {
        width: 45px;
        height: 39px;
        margin-left: 12px;
        margin-right: 15px;
      }
      .item_text {
        display: block;
        color: #a9a9a9;
      }
    }
  }
  .current {
    .item_text {
      color: #0058c6 !important;
    }
    border: 1px solid #0058c6;
  }
  .current_status {
    font-weight: bold;
    color: #000000 !important;
  }
  .order_status {
    display: flex;
    justify-content: space-between;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-weight: 400;
    color: #888888;
    margin-top: 14px;
    .status_item {
      position: relative;
      padding: 0 27px;
    }
    .status_line {
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-16px);
      width: 31px;
      height: 2px;
      background: #0044c9;
    }
  }

  .order_list_receive {
    height: calc(100vh - 192px);
    box-sizing: border-box;
    padding: 8px 16px 0 16px;
    overflow-y: auto;
  }
  .order_list {
    box-sizing: border-box;
    height: calc(100vh - 231px);
    padding: 0 16px;
    overflow-y: auto;
  }
  .rule_kefu {
    padding: 0;
    background-color: transparent;
    &::after {
      border: none;
    }
  }
  .bottom_btn {
    position: absolute;
    left: 0;
    bottom: 35px;
    width: 100%;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    .rule_kefu {
      width: 62px;
      margin-right: 0;
      margin-left: 0;
    }
    .btn_view {
      display: flex;
      align-items: center;
      width: 60px;
      height: 13px;
      line-height: 13px;
      border-bottom: 1px solid #0044c9;
      font-size: 11px;
      font-weight: 400;
      color: #0044c9;
      .btn_image {
        width: 10px;
        height: 10px;
        margin-right: 3px;
      }
    }
    .btn_view:first-child {
      margin-right: 27px;
    }
  }

  .order_item {
    position: relative;
    width: 344px;
    height: 157px;
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    margin: 12px 0;
    box-sizing: border-box;
    padding: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    .status {
      width: 59px;
      height: 21px;
      line-height: 21px;
      text-align: center;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 59px 21px;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
    }
    .title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-top: 5px;
      height: 12px;
      margin-bottom: 31px;
      .title_icon {
        width: 12px;
        height: 12px;
        margin-right: 6px;
      }
    }
    .detail {
      display: flex;
      align-items: center;
      height: 43px;
      margin-bottom: 18px;
      .detail_card {
        width: 70px;
        height: 43px;
        border-radius: 6px;
      }
      .text {
        flex: 1;
        padding: 0 15px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .time_content {
        width: 75px;
        height: 39px;
        .time_text {
          height: 10px;
          margin-bottom: 9px;
          line-height: 10px;
          font-size: 10px;
          font-weight: 500;
          color: #888888;
          justify-content: center;
        }
        .time_time {
          height: 20px;
          line-height: 20px;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          letter-spacing: 2px;
          font-size: 20px;
          font-weight: 500;
          color: #000000;
        }
        .time_label {
          display: block;
          font-size: 10px;
          height: 10px;
          line-height: 10px;
        }
        .time_view {
          height: 20px;
          line-height: 20px;
          display: flex;
          align-items: flex-end;
        }
      }
    }
  }

  .receive_order_item {
    position: relative;
    width: 344px;
    height: 187px;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    background-color: #fff;
    border-radius: 10px;
    margin: 12px 0;
    .title_back {
      width: 100%;
      height: 122px;
      background-repeat: no-repeat;
      background-position: bottom left;
      background-size: 344px 100%;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 17px 19px;
      .title_text {
        width: 147px;
        height: 41px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        .title_label {
          display: block;
        }
      }
      .order_card {
        width: 91px;
        height: 56px;
        border-radius: 10px;
        position: absolute;
        top: 43px;
        right: 42px;
      }
      .title_status {
        width: 59px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 59px 21px;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 12px;
        font-weight: 400;
        color: #0044c9;
      }
    }
    .order_info {
      display: flex;
      align-items: center;
      height: 38px;
      padding-left: 23px;
      margin-top: 11px;
      .info_iamge {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        margin-right: 14px;
      }
      .info_wish {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        .info_label {
          display: block;
        }
        .wish {
          display: block;
          font-size: 11px;
          font-weight: 400;
          color: #8e8e8e;
          margin-top: 5px;
          padding-left: 1px;
        }
      }
      .btn {
        position: absolute;
        right: 15px;
        bottom: 16px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: flex-end;
    height: 19px;
    .pay,
    .cancel,
    .service {
      box-sizing: border-box;
      width: 79px;
      height: 19px;
      text-align: center;
      line-height: 19px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 400;
      margin-left: 10px;
    }
    .cancel {
      border: 1px solid #a6a6a6;
      color: #a6a6a6;
    }
    .pay {
      background-color: #0044c9;
      color: #fff;
    }
    .service {
      border: 1px solid #ff0000;
      color: #ff0000;
    }
    .rule_kefu {
      margin-left: 0;
      margin-right: 0;
    }
  }
  .rule_kefu {
    padding: 0;
    background-color: transparent;
    &::after {
      border: none;
    }
  }
}
</style>
